<template>
	<view class="wzg_tabs">
		<u-tabs 
			:list="get_tab_list" 
			:is-scroll="false" 
			:current="current" 
			@change="change"
			font-size="30"
			inactive-color="#626262"
			bar-height="5"
			:bar-style="{
				backgroundColor:'#5c77ff',
				marginTop:'10px',
				transitionProperty: 'font-size background-color, color',
			}"
			:active-item-style="{
				color:'#5c77ff',
				fontSize:'35rpx', 
			}">
		</u-tabs>
	</view>
</template>

<script>
export default{  //项目推进item组件
	name:"Wzg_tabs",
	props:{
		tab_list:{  //tabs数据数组 Array <String>
			type:Array, 
			default:[],
		}
	},
	computed:{
		get_tab_list(){  //tab组建要的数组必须是Array <Object> 要拼接
			let tab_list = [];
			for(let a of this.tab_list){
				tab_list.push({
					name:a,
				});
			}
			return tab_list;
		},
	},
	data(){
		return{
			current: 0,
		}
	},
	methods:{
		change(index) {  //当标签被点击时改变标签并且触发change属性
			uni.vibrateShort();
			this.current = index;
			this.$emit("change",index);
		},
	},
	created(){
		
	},
}
</script>

<style lang="scss" scoped>
.wzg_tabs{
	width: 100%;
	height: 100%;
	@include flex_layout_column;
	justify-content:center;
}
</style>
